<template>
    <div id="z">
        <div id="r1">
            <div id="r1z">
                <goods-menu :goods="goods" class="menu"></goods-menu>
                <goods-item :goods="goods[$store.state.clickGoodsMenu]" class="food"></goods-item>
            </div>
        </div>
        <div id="r2">
        </div>
        <div id="r3">
            <pre>
            仍然可以用 height:100% 获取到视口高度，但需满足条件：
            1、容器要用绝对定位
            2、父容器不能用绝对或相对定位；
            </pre>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import GoodsMenu from './goodsMenu'
    import GoodsItem from './goodsItem'
    export default {
        name: "goods",
        data(){
            return{
                goods:[],
            }
        },
        components:{
            GoodsMenu,
            GoodsItem,
        },
        methods:{
            goodsData(res){
                this.goods=res.data.data;
            }
        },
        mounted(){
            this.axios.get('/api/goods.json').then(this.goodsData)
            this.menu=new BScroll('.menu', {probeType:3, click:true})
            this.food=new BScroll('.food', {probeType:3})

            this.menu.on('scroll',(pos)=>{  //记录左侧菜单按钮滚动的位置
                this.$store.dispatch('scrollGoodsMenu', pos.y)
            });
            this.food.on('scroll',(pos)=>{  //记录右侧滚动的位置
                this.$store.dispatch('scrollGoodsItem', pos.y)
            });
            setTimeout(()=>{                //页面刷新时，恢复左右两侧滚动的历史位置
                this.menu.scrollTo(0, this.$store.state.scrollGoodsMenu)
                this.food.scrollTo(0, this.$store.state.scrollGoodsItem)
            },100)
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    #z
        flex:1
        display:flex
        flex-flow:column
        #r1
            flex:1
            height:100%
            position:relative
            #r1z
                height:100%
                width:100%
                overflow:hidden
                position:absolute
                display:flex
                background-color:$bgColor
        #r2 /*购物车，绝对底部*/
            background-color:gray
            height:64px
        #r3
            background-color:rgba(255,0,255,0.8)
            height:100%
            width:100%
            position:absolute
            top:0
            display:none


</style>
